<template>
  <div class="app-container">
    <Form
      v-if="showSearch"
      v-model:formData="searchInfo"
      :formItems="formItems"
    >
      <template #footer>
        <div style="text-align: left">
          <el-button size="small" icon="Search" type="primary" @click="goSearch"
            >搜索</el-button
          >
          <el-button size="small" icon="Refresh" @click="resetSearch"
            >重置</el-button
          >
        </div>
      </template>
    </Form>
    <h3>
      <!-- <el-button size="small" icon="Plus" @click="add">添加</el-button> -->
    </h3>
    <el-row :gutter="10" class="mb8">
      <el-col :span="1.5"> </el-col>
      <right-toolbar
        v-model:showSearch="showSearch"
        @queryTable="resetSearch"
      ></right-toolbar>
    </el-row>
    <h3></h3>
    <x-table
      :propList="propList"
      :tableData="info.items"
      :isLoading="isLoading"
    >
      <template #imgs="{ row }">
        <el-image
          :src="img"
          v-for="img in row.imgs"
          :key="img"
          alt=""
          :preview-src-list="row.imgs"
          style="width: 100px; height: 100px"
        />
      </template>
      <template #op="{ row }">
        <el-button type="primary" link icon="Edit" @click="change(row)"
          >编辑</el-button
        >
        <el-button type="primary" link icon="Delete" @click="del(row)"
          >删除</el-button
        >
      </template>
    </x-table>
    <pagination
      v-show="info.total > 0"
      :total="info.total"
      v-model:page="searchInfo.pageNum"
      v-model:limit="searchInfo.pageSize"
      @pagination="getInfo"
    />
    <Dialog width="30%" title="内容" v-model:isShowDialog="isShowDialog">
      <div>
        <p>{{ curItem.content }}</p>
      </div>
      <!-- <Form ref="formRef" v-bind="dialogConfig.formConfig"> </Form> -->
    </Dialog>
  </div>
</template>

<script>
import { propList, formItems, dialogConfig } from "./config";
import { getList } from "@/api/system/officialLog";
export default {
  name: "monitoroperlogofficialLog",
  data() {
    return {
      dialogConfig,
      curItem: {},
      showSearch: true,
      isShowDialog: false,
      isLoading: false,
      propList,
      formItems,
      info: {},
      searchInfo: {
        pageNum: 1,
        pageSize: 10,
        create_time: this.getTimeFilterDefault(true),
      },
    };
  },
  computed: {},
  created() {
    this.init();
  },
  mounted() {},
  methods: {
    init() {
      this.getInfo();
    },
    async getInfo() {
      this.isLoading = true;
      const params = { ...this.searchInfo };
      const { data } = await getList(params);
      this.info = data;
      this.isLoading = false;
    },
    resetSearch() {
      this.searchInfo = this.$options.data.call(this).searchInfo;
      this.searchInfo.created_at = this.getTimeFilterDefault(true);
      this.getInfo();
    },
    goSearch() {
      // 重置时间
      this.getInfo();
    },
    add() {
      // 添加
      this.dialogConfig.formConfig.formData = {};
      this.isShowDialog = true;
    },
    change(item) {
      // 修改
      this.dialogConfig.formConfig.formData = { ...item };
      this.isShowDialog = true;
    },
    del(item) {
      // 删除
    },
  },
};
</script>

<style lang="scss" scoped></style>
